<!--
 * 严肃声明：
 * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
 * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
 * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
 * Copyright (c) 2020 陈尼克 all rights reserved.
 * 版权所有，侵权必究！
 *
-->

<template>
  <div class="product-list-wrap">
    <div class="product-list-content">
      <header class="category-header wrap">
        <i class="nbicon nbfanhui" @click="goBack"></i>
        <div class="header-search">
          <i class="nbicon nbSearch"></i>
          <input v-focus v-model="name" class="search_title"  @input="search_title" type="text" autofocus="autofocus"/>
        </div>
        <span class="search-btn" @click="getSearch">搜索</span>
      </header>
    </div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="product-list-refresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        @offset="300"
      >
        <div class="product-item" v-for="(item, index) in productList" :key="index" @click="productDetail(item)">
          <img :src="prefix(item.goods_img)"/>
          <div class="product-info">
            <p class="name">{{ item.goods_name }}</p>
            <div class="subtitle">{{ item.goods_intro.substring(0,50)+'...' }}</div>
            <br>
            <br>
            <span class="price">￥ {{ item.selling_price }}</span>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import {getQueryString} from '@/common/js/utils'
import {search} from '../service/good'
import {Toast} from 'vant'

export default {
  data() {
    return {
      keyword: this.$route.query.keyword || '',
      searchBtn: false,
      seclectActive: false,
      refreshing: false,
      list: [],
      loading: false,
      finished: false,
      productList: [],
      totalPage: 0,
      page: 1,
      name: '',
      Val:'',
      time:null,
    }
  },
  watch: {
    name(val) {
      this.$axios.get(this.$settings.BASE_URL + 'goodsshelf/search/?search=' + val,
        {headers: {'Authorization': 'jwt ' + this.$cookies.get('token')}}).then(res => {
        this.productList = res.result
      });
    }
  },
  mounted() {
    window.addEventListener('scroll', this.pageScroll)
    setTimeout(() => {
      this.isLoading = false
    }, 500)
    this.init()
  },
  created() {
    if (this.$route.params.id != 'home') {
      this.$axios.get(this.$settings.BASE_URL + 'goodsshelf/category/?goods_classify_id=' + this.$route.params.id,
        {headers: {'Authorization': 'jwt ' + this.$cookies.get('token')}}).then(res => {
        this.productList = res.result
      });
    }
  },
  methods: {
    async init() {
      this.finished = true
      this.loading = false;
    },
    search_title(){
      if(this.time !=null){
         clearTimeout(this.time)
      }
      this.time = setTimeout(()=>{
        console.log(this.name)
      },3000)
},
    goBack() {
      this.$router.go(-1)
    },
    productDetail(item) {
      this.$router.push({path: `/product/${item.id}`})
    },
    getSearch() {
      this.$axios.get(this.$settings.BASE_URL + 'goodsshelf/search/?search=' + this.name).then(res => {
        this.productList = res.result
      });
      this.onRefresh()
    },
    pageScroll() {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      scrollTop > 50 ? this.seclectActive = true : this.seclectActive = false
    },
    onLoad() {
      if (!this.refreshing && this.page < this.totalPage) {
        this.page = this.page + 1
      }
      if (this.refreshing) {
        this.list = [];
        this.refreshing = false;
      }
      this.init()
    },
    onRefresh() {

      this.refreshing = true
      this.finished = false
      this.loading = true
      this.page = 1
      this.onLoad()
    },
    changeTab(name, title) {
      this.orderBy = name
      this.onRefresh()
    }
  }
}
</script>

<style lang="less" scoped>
@import '../common/style/mixin';

.product-list-content {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1000;
  background: #fff;

  .category-header {
    .fj();
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding: 0 15px;
    .boxSizing();
    font-size: 15px;
    color: #656771;
    z-index: 10000;

    &.active {
      background: @primary;
    }

    .icon-left {
      font-size: 25px;
      font-weight: bold;
    }

    .header-search {
      display: flex;
      width: 76%;
      height: 20px;
      line-height: 20px;
      margin: 10px 0;
      padding: 5px 0;
      color: #232326;
      background: #F7F7F7;
      .borderRadius(20px);

      .nbSearch {
        padding: 0 5px 0 20px;
        font-size: 17px;
      }

      .search_title {
        font-size: 12px;
        color: #666;
        background: #F7F7F7;
      }
    }

    .icon-More {
      font-size: 20px;
    }

    .search-btn {
      height: 28px;
      margin: 8px 0;
      line-height: 28px;
      padding: 0 5px;
      color: #fff;
      background: @primary;
      .borderRadius(5px);
      margin-top: 10px;
    }
  }
}

.product-list-refresh {
  margin-top: 78px;

  .product-item {
    .fj();
    width: 100%;
    height: 120px;
    padding: 10px 0;
    border-bottom: 1px solid #dcdcdc;

    img {
      width: 140px;
      height: 120px;
      padding: 0 10px;
      .boxSizing();
    }

    .product-info {
      width: 56%;
      height: 120px;
      padding: 5px;
      text-align: left;
      .boxSizing();

      p {
        margin: 0
      }

      .name {
        width: 100%;
        max-height: 40px;
        line-height: 20px;
        font-size: 18px;
        color: #0dc3c3;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight:500;
        white-space: nowrap;
      }

      .subtitle {
        width: 100%;
        max-height: 20px;
        padding: 10px 0;
        line-height: 18px;
        font-size: 14px;
        color: #999;
        //overflow: hidden;
      }

      .price {
        color: @primary;
        font-size: 16px;
      }
    }
  }
}
</style>
